<template>
    <div class="panel-body panel-info">
        <el-form :model="form" ref="form" class="form" label-width="100px">
            <div class="panel-header">
                <div class="panel-title">
                    基本信息
                </div>
            </div>
            <div class="panel-main">
                <el-form-item required label="类目：" :rules="[{ required: true, message: '请选择类目名称', trigger: 'blur'}]"  prop="cid">
                    <el-radio-group size="medium" v-model="form.cid">
                        <el-radio :label="parseInt(cate.id)" v-for="cate in cates" :key="cate.id" border>{{ cate.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请填写标题', trigger: 'blur'}]" label="标题："
                              prop="title">
                    <el-input size="medium" v-model="form.title" placeholder="请填写标题"></el-input>
                </el-form-item>
                <el-form-item v-if="form.cid == 11" label="封面图："
                              prop="thumb" :rules="[{ required: true, message: '请填写上传封面图', trigger: 'blur'}]">
                    <el-upload
                        class="ad-uploader"
                        :action="upload"
                        :show-file-list="false"
                        name="image"
                        :on-success="uploadSuccess"
                        :before-upload="uploadBefore">
                        <img v-if="form.thumb" :src="form.thumb" style="height: 144px;width: 296px;line-height: 144px">
                        <i v-else class="el-icon-plus ad-uploader-icon" style="height: 144px;width: 296px;line-height: 144px"></i>
                        <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸370:180</div>
                    </el-upload>
                </el-form-item>
                <el-form-item v-if="form.cid == 12" label="封面图："
                              prop="thumb" :rules="[{ required: true, message: '请填写上传封面图', trigger: 'blur'}]">
                    <el-upload
                        class="ad-uploader"
                        :action="upload"
                        :show-file-list="false"
                        name="image"
                        :on-success="uploadSuccess"
                        :before-upload="uploadBefore">
                        <img v-if="form.thumb" :src="form.thumb" style="height: 168px;width: 306px;line-height: 168px">
                        <i v-else class="el-icon-plus ad-uploader-icon" style="height: 168px;width: 306px;line-height: 168px"></i>
                        <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸510:280</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="内容：" :rules="[{ required: true, message: '请填写案例内容', trigger: 'blur'}]"
                              prop="content">
                    <vue-neditor-wrap v-model="form.content" @ready="ready"
                                      :config="myConfig"
                                      :destroy="false"></vue-neditor-wrap>
                </el-form-item>
                <el-form-item required label="状态："  prop="status">
                    <el-radio-group size="medium" v-model="form.status">
                        <el-radio :label="1" border>正常</el-radio>
                        <el-radio :label="2" border>锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <el-form-item style="padding-left: 150px;margin-top: 30px">
                <el-button size="medium" type="primary" @click="update()">保 存</el-button>
                <el-button size="medium"  @click="back()" style="margin-left: 50px">返 回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<!---->
<script>
    import {mapGetters} from 'vuex';
    import {CaseUpdate,CaseInfo,CaseCate} from '../../utils/request';
    import VueNeditorWrap from 'vue-neditor-wrap';
    export default {
        components: {VueNeditorWrap},
        computed: {
            ...mapGetters(['meta_name','loading', 'upload','upload_file','detail']),
        },
        data() {
            return {
                myConfig: {
                    // 你的UEditor资源存放的路径,相对于打包后的index.html
                    UEDITOR_HOME_URL: '/NEditor/',
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 400,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 关闭自动保存
                    enableAutoSave: false,
                    //关闭远程图片是否抓取到本地保存
                    catchRemoteImageEnable: false,
                    //是否启用元素路径，默认是显示
                    elementPathEnabled: false,
                    ////是否开启字数统计
                    wordCount: false,
                    //是否保持toolbar的位置不动,默认true
                    autoFloatEnabled: false
                },
                form: {
                    id: 0,
                    title: '',
                    thumb: '',
                    content: '',
                    status: 1,
                    cid: 1,
                },
                editor: null,
                cates: [],
            }
        },
        activated() {
            this.cate();
            this.form = {
                id: 0,
                title: '',
                thumb: '',
                content: '',
                status: 1,
                cid: 1,
            };
            this.$store.dispatch('setActive', '/case');
        },
        methods: {
            cate(){
                CaseCate().then((res)=>{
                    if(res.code){
                        this.$notify.error({title: 'ERROR', message: res.msg});
                    }else{
                        this.cates = res.data;
                        this.form.cid = this.cates[0].id
                    }
                });
            },
            ready(editor) {
                this.editor = editor;
                if(this.$route.query.id){
                    if(this.detail){
                        this.$nextTick(()=>{
                            this.form = {
                                id: this.detail.id,
                                title: this.detail.title,
                                content: this.detail.content,
                                status: this.detail.status,
                                cid: this.detail.cid,
                                thumb: this.detail.thumb,
                            };
                        })
                    }else{
                        this.info(this.$route.query.id);
                    }
                }else{
                    this.editor.setPlaceholder('请填写案例内容');
                }
            },
            info(id){
                CaseInfo({params: {id: id}}).then((res)=>{
                    if(res.code){
                        this.$notify.error({title: 'ERROR', message: res.msg});
                    }else{
                        let detail = res.data;
                        this.form = {
                            id: detail.id,
                            title: detail.title,
                            content: detail.content,
                            status: detail.status,
                            cid: detail.cid,
                            thumb: detail.thumb,
                        };
                    }
                });
            },
            //上传封面
            uploadSuccess(res, file) {
                this.form.thumb = res.data.path;
            },
            uploadBefore(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$notify.error({title: 'ERROR', message: '上传封面图片只能是 JPG | PNG | GIF格式!'});
                }
                if (!isLt2M) {
                    this.$notify.error({title: 'ERROR', message: '上传封面图片大小不能超过 2M!'});
                }
                return isJPG && isLt2M;
            },
            back() {
                this.$router.go(-1);
            },
            update(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        CaseUpdate(this.form).then((res)=>{
                            if(res.code){
                                this.$notify.error({title: 'ERROR', message: res.msg});
                            }else{
                                this.$notify({
                                    type: 'success',
                                    duration:1000,
                                    title: 'SUCCESS',
                                    message: res.msg, onClose:()=>{
                                        this.back();
                                    }});
                            }
                        });
                    }
                });
            }
        }
    }
</script>
<style>

</style>
